<template>
  <el-card class="activity-card" :body-style="{ padding: '0px' }">
    <el-image :src="activity.image" fit="cover" class="activity-image" />
    <div class="activity-content">
      <div class="activity-status" :class="activity.status">{{ activity.statusText }}</div>
      <h3 class="activity-title">{{ activity.title }}</h3>
      <p class="activity-desc">{{ activity.description }}</p>
      <div class="activity-footer">
        <div class="activity-info">
          <span class="time">
            <el-icon><Calendar /></el-icon>
            {{ activity.date }}
          </span>
          <span class="location">
            <el-icon><Location /></el-icon>
            {{ activity.location }}
          </span>
        </div>
        <el-button type="primary" :disabled="activity.status === 'ended'" @click="handleSignup">
          {{ activity.status === 'ended' ? '已结束' : '立即报名' }}
        </el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import { Calendar, Location } from '@element-plus/icons-vue'

export default {
  name: 'ActivityCard',
  components: {
    Calendar,
    Location
  },
  props: {
    activity: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleSignup() {
      this.$emit('signup', this.activity.id)
    }
  }
}
</script>

<style scoped lang="scss">
.activity-card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s;

  &:hover {
    transform: translateY(-5px);
  }

  .activity-image {
    width: 100%;
    height: 200px;
  }

  .activity-content {
    padding: 20px;

    .activity-status {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 4px;
      font-size: 12px;
      margin-bottom: 12px;

      &.ongoing {
        background: #f0f9eb;
        color: #67c23a;
      }

      &.upcoming {
        background: #ecf5ff;
        color: #409eff;
      }

      &.ended {
        background: #f4f4f5;
        color: #909399;
      }
    }

    .activity-title {
      font-size: 18px;
      color: #303133;
      margin-bottom: 10px;
    }

    .activity-desc {
      color: #606266;
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 20px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .activity-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .activity-info {
        display: flex;
        gap: 15px;
        color: #909399;
        font-size: 13px;

        span {
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }
    }
  }
}
</style> 